@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont.woff2?t=1621216653844') format('woff2'),
        url('../fonts/iconfont.woff?t=1621216653844') format('woff'),
        url('../fonts/iconfont.ttf?t=1621216653844') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* topnav头部导航栏开始 */
.topnav {
    height: 53px;
    background-color: #333333;
}

.w {
    width: 1240px;
    margin: 0 auto;
}

.top_rd ul li {
    float: left;
    height: 21px;
    text-align: center;
    padding: 0 15px;
    margin-top: 20px;
    border-right: 1px solid #666;
}

.top_rd ul li:last-child {
    border: 0;
    font-size: 14px;
}

.top_rd ul li:last-child a::before {
    content: '\e621';
    font-family: 'iconfont';
    font-size: 14px;
}

/* nav区域开始 */
.nav {
    height: 205px;
}

.nav_middle {
    height: 129px;
    width: 1200px;
    margin: 32px 0 44px 0;
}

.logo {
    width: 143px;
    height: 129px;
}

h1 a {
    display: block;
    width: 143px;
    height: 129px;
    font-size: 0;
    background: url(../images/logo.png);
    background-size: cover;
}

.nav_middle ul {
    margin: 75px 0 0 85px;
    float: left;
}

.nav_middle ul li {
    float: left;
    margin-right: 45px;
}

.nav_middle ul li a {
    display: block;
    height: 30px;
}

.nav_middle ul li:hover a {
    border-bottom: 1px solid green;
}

.nav_middle ul li a {
    font-size: 16px;
    color: #333;
}

/* 小车车区域 */
.shopcar {
    position: relative;
    width: 222px;
    height: 32px;
    margin-top: 64px;
}

.shopcar input {
    position: absolute;
    width: 172px;
    height: 30px;
    border-bottom: 3px solid #ccc;

}

.input1 {
    /* 原理分析 移动端会讲2倍精灵图 */
    position: absolute;
    top: 2px;
    left: 0;
    width: 17px;
    height: 18px;
    background-color: hotpink;
    background: url(../images/sprites.png) no-repeat -80px -70px;
    background-size: 400px 400px;
    /* z-index: 3; */
}

input::placeholder {
    padding-left: 20px;
}

.shopcar .smallcar {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 30px;
    text-align: center;
}

.shopcar .smallcar::before {
    content: '\e699';
    font-family: 'iconfont';
    font-size: 20px;
}

.shopcar .count {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 14px;
    background-color: #e16033;
    border-radius: 7px;
    color: #fff;
}

/* footer区域开始 */
.footer_hb {
    overflow: hidden;
    height: 290px;
}

.service,
.about {
    width: 197px;
    height: 145px;
    margin-left: 30px;
    margin-top: 70px;
}

.service p,
.about p {
    height: 50px;
    width: 197px;
    text-align: center;
    font-size: 16px;
    color: #999
}

.service_ld,
.about_ld {
    margin-left: 10px;
}

.service_ld,
.service_rd,
.about_ld,
.about_rd {
    height: 92px;
    width: 90px;
    text-align: center;
    border: 1px solid #ccc;
}

.service_ld,
.about_ld {
    margin-right: 5px;
}

.service span .about span {
    display: inline-block;
    color: #999;
    font-size: 14px;
}

.servicepic,
.servicepic1,
.aboutpic,
.aboutpic1 {
    width: 72px;
    height: 54px;
    background: url(../images/sprites.png) no-repeat -501px -141px;
    margin-left: 17px;
    margin-bottom: 5px;
    margin-top: 15px;
}

.servicepic1 {
    background: url(../images/sprites.png) no-repeat -701px -142px;
}

/* 底部上面第二个框框 */
.about {
    margin-left: 0;
}

.aboutpic {
    background: url(../images/sprites.png) no-repeat -410px -30px;
}

.aboutpic1 {
    background: url(../images/sprites.png) no-repeat -700px -32px;
}

/* 底部上面第三个框框 */
.load {
    width: 243px;
    height: 157px;
    margin-top: 70px;
}

.load_hd {
    height: 40px;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.loadpic {
    width: 116px;
    height: 116px;
    border: 1px solid #ccc;
}

.loadpic img {
    width: 100%;
    height: 100%;
}

.upload {
    width: 107px;
    height: 116px;
}

.upload span {
    font-size: 14px;
    color: #999;
}

.upload a {
    display: inline-block;
    margin-top: 25px;
    width: 106px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background-color: #5eb69c;
    font-size: 14px;
    color: #fff;
}

/* 右边第四个框框开始 */
.servicehot {
    margin-top: 70px;
    width: 159px;
    height: 122px;
    text-align: center;
}

.servicehot h2 {
    margin-top: 55px;
    font-size: 22px;
    color: #666
}

.servicehot>p {
    font-size: 16px;
    color: #999
}

/* 三根线 */
.line {
    margin: 60px 55px 0;
    width: 2px;
    height: 190px;
    background-color: #f2f2f2;
}

/* 底部下半部分区域开始 */
.footer_bd {
    height: 345px;
    background-color: #333;
}

.footer_tt {
    height: 175px;
    border-bottom: 3px solid #434343;
}

.footer_tt1,
.footer_tt2,
.footer_tt3 {
    width: 190px;
    height: 175px;
    line-height: 175px;
    text-align: center;
    font-size: 28px;
    color: #fff;
}

.footer_tt2 {
    margin: 0 300px;
}

.footer_tt2::before,
.footer_tt3::before,
.footer_tt1::before {
    content: "";
    width: 58px;
    height: 58px;
    display: inline-block;
    background: url(../images/sprites.png) no-repeat 0 0;
    background-size: 400px 400px;
    vertical-align: middle;
    margin-right: 15px;
}

.footer_tt2::before {
    background: url(../images/sprites.png) no-repeat -65px 0;
    background-size: 400px 400px;
}

.footer_tt3::before {
    background: url(../images/sprites.png) no-repeat -130px 0;
    background-size: 400px 400px;
}

/* 最底部区域开始 */
.footer_tb {
    height: 170px;
    text-align: center;
}

.copyright {
    margin-top: 40px;
    height: 53px;
}

.copyright a {
    font-size: 15px;
    color: #999;
    padding: 0 10px;
}

.copyright p {
    margin-top: 15px;
}